import React, { Component } from 'react';
import { Row, Col } from 'antd';
import { HomeOutlined, SettingFilled } from '@ant-design/icons';
import './page.scss';
import './icon.scss';
class App extends Component {
  //js的构造函数，由于其他任何函数执行
  constructor(props) {
    super(props); //调用父类的构造函数，固定写法
    this.state = {
      // 时间
      time: '',
      iptplaceholder: true,
      searcher: 'https://www.baidu.com/s?wd=',
      // 搜索框绑定value
      searchValue: '',
      searchList: [
        {
          value: '百度',
          searcher: 'https://www.baidu.com/s?wd=',
          isFalg: true,
          icon: 'icon-baidu',
        },
        {
          value: '谷歌',
          searcher: 'https://www.google.com.hk/search?q=',
          isFalg: false,
          icon: 'icon-guge1',
        },
        {
          value: '必应',
          searcher: 'https://cn.bing.com/search?q=',
          isFalg: false,
          icon: 'icon-biying',
        },
      ],
      //   input聚焦
      inputIsflag: false,
    };
  }

  render() {
    return (
      <div className='page'>
        <Row>
          <Col className='conent'>
            <Col className='time'>{this.state.time}</Col>
            <Col className='searchBox' xs={18} sm={16} md={16} lg={16} xl={10}>
              <input
                placeholder={this.state.iptplaceholder ? 'search' : ''}
                className={this.state.inputIsflag ? ' searchBox-active' : ''}
                type='text'
                onChange={this.changeValue.bind(this)}
                onFocus={this.inputOnfocus.bind(this)}
                onBlur={this.inputOnblur.bind(this)}
                defaultValue={this.state.searchValue}
                onKeyDown={this.goSearch.bind(this)}
              />
            </Col>
            <Col className='searchNav'>
              {this.state.searchList.map((item, index) => {
                return (
                  <Col
                    className={item.isFalg ? 'searchList active' : 'searchList'}
                    onClick={this.editSearcher.bind(this, index, item.searcher)}
                    key={index}
                  >
                    <i className={`${item.icon} iconfont`}></i>
                  </Col>
                );
              })}
            </Col>
          </Col>
          <Col className='icons-list'>
            <HomeOutlined className='homeIcon' />

            <SettingFilled className='settingIcon' />
          </Col>
        </Row>
      </div>
    );
  }
  componentDidMount() {
    this.getTime();
    this.setSeeion();
  }
  componentWillUnmount() {}
  // test
  setSeeion() {
    sessionStorage.setItem('test', 1);
  }
  //   时间
  getTime() {
    var h = new Date().getHours().toString();
    var m = new Date().getMinutes().toString();
    var s = new Date().getSeconds().toString();
    this.setState({
      time:
        (h.length === 1 ? 0 + h : h) +
        ':' +
        (m.length === 1 ? 0 + m : m) +
        ':' +
        (s.length === 1 ? 0 + s : s),
    });
    setInterval(() => {
      var h = new Date().getHours().toString();
      var m = new Date().getMinutes().toString();
      var s = new Date().getSeconds().toString();

      this.setState({
        time:
          (h.length === 1 ? 0 + h : h) +
          ':' +
          (m.length === 1 ? 0 + m : m) +
          ':' +
          (s.length === 1 ? 0 + s : s),
      });
    }, 1000);
  }
  changeValue(e) {
    this.setState({
      searchValue: e.target.value,
    });
  }
  //   回车搜索
  goSearch(e) {
    if (e.keyCode === 13) {
      window.open(`${this.state.searcher}${this.state.searchValue}`, '_blank');
      this.setState({
        searchValue: '',
        inputIsflag: !this.state.inputIsflag,
        iptplaceholder: true,
      });
      e.target.value = '';
      console.log(e.target.value);
    }
  }
  //   跟换搜索引擎
  editSearcher(index, value) {
    const searchList = [...this.state.searchList];
    searchList.map((item, i) => {
      item.isFalg = false;
      if (index === i) {
        item.isFalg = true;
      }
    });
    this.setState({
      searcher: value,
      searchList,
    });
  }
  //  input获焦
  inputOnfocus() {
    this.setState({
      inputIsflag: !this.state.inputIsflag,
      iptplaceholder: false,
    });
  }
  //   失焦
  inputOnblur() {
    this.setState({
      inputIsflag: !this.state.inputIsflag,
      iptplaceholder: true,
    });
    setTimeout(function () {
      var scrollHeight =
        document.documentElement.scrollTop || document.body.scrollTop || 0;

      window.scrollTo(0, Math.max(scrollHeight - 1, 0));
    }, 100);
  }
}
export default App;
